import { Button, Card, Divider, message, Modal, Typography, Flex } from 'antd';
import { useTheme, useThemeMode } from 'antd-style';
import { FC, ReactNode } from 'react';
import { FormButtonGroup, FormDrawer, FormItem, FormLayout, Input, Reset, Submit } from '@formily/antd-v5';
import { createSchemaField } from '@formily/react';

const StaticModal = Modal._InternalPanelDoNotUseOrYouWillBeFired;
const StaticMessage = message._InternalPanelDoNotUseOrYouWillBeFired;
const { Text } = Typography;

interface AppProps {
  extra?: ReactNode;
}
const Demo: FC<AppProps> = ({ extra }) => {
  const theme = useTheme();
  const { appearance, themeMode, browserPrefers } = useThemeMode();

  const SchemaField = createSchemaField({
    components: {
      FormItem,
      Input,
    },
  })
  const schema = {
    type: 'object',
    properties: {
      aaa: {
        type: 'string',
        title: '输入框1',
        required: true,
        'x-decorator': 'FormItem',
        'x-component': 'Input',
      },
      bbb: {
        type: 'string',
        title: '输入框2',
        required: true,
        'x-decorator': 'FormItem',
        'x-component': 'Input',
      },
      ccc: {
        type: 'string',
        title: '输入框3',
        required: true,
        'x-decorator': 'FormItem',
        'x-component': 'Input',
      },
      ddd: {
        type: 'string',
        title: '输入框4',
        required: true,
        'x-decorator': 'FormItem',
        'x-component': 'Input',
      },
    },
  }

  return (
    <div>
      <Flex align={'center'}>
        <Flex align={'center'}>
          <Text type={'secondary'}>主题模式：</Text>
          {themeMode}
          <Divider type={'vertical'} />
          <Text type={'secondary'}>外观模式：</Text>
          {appearance}
          <Divider type={'vertical'} />
          <Text type={'secondary'}>浏览器外观：</Text>
          {browserPrefers}
        </Flex>
        {extra}
      </Flex>

      <Button>默认按钮</Button>
      <Button ghost type={'primary'}>
        次强调按钮
      </Button>
      <Button type={'primary'}>强调按钮</Button>
      <Card>卡片效果</Card>

      <StaticModal type={'success'} title={'成功'}>
        这是一个静态化呈现的成功弹窗
      </StaticModal>
      <Divider style={{ margin: '8px 0' }} orientation={'left'}>
        组件示例
      </Divider>

      <Button
        onClick={() => {
          FormDrawer('弹窗表单', () => {
            return (
              <FormLayout labelCol={6} wrapperCol={10}>
                <SchemaField schema={schema} />
                <FormDrawer.Extra>
                  <FormButtonGroup align="right">
                    <Submit
                      onSubmit={() => {
                        return new Promise((resolve) => {
                          setTimeout(resolve, 1000)
                        })
                      }}
                    >
                      提交
                    </Submit>
                    <Reset>重置</Reset>
                  </FormButtonGroup>
                </FormDrawer.Extra>
              </FormLayout>
            )
          })
            .open({
              initialValues: {
                aaa: '123',
              },
            })
            .then(console.log)
        }}
      >
        点我打开表单
      </Button>
    </div>
  );
};
export default Demo;